<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
import resize from './resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1200px'
    },
    height: {
      type: String,
      default: '1200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        backgroundColor: '#fff',
        title: {
          text: '观看统计',
          textStyle: {
            fontSize: 18
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        color: ['#feae46'],
        // legend: {
        //   top: 50,
        //   itemWidth: 28,
        //   itemHeight: 15,
        //   itemGap: 13,
        //   data: ['新增订单'],
        //   left: 'center',
        //   textStyle: {
        //     fontSize: 18,
        //     color: '#000'
        //   }
        // },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   },
        //   right: 20
        // },
        grid: {
          top: 100,
          left: '5%',
          right: '5%',
          // bottom: '2%',
          containLabel: true,
          height: 330
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#f8f8f8'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            color: '#9fa0a3',
            textStyle: {
              fontSize: 14
            }
          },
          data: ['03-01', '03-02', '03-03', '03-04', '03-05', '03-06', '03-07']
        }],
        yAxis: [{
          type: 'value',
          name: '',
          min: '0',
          max: '350',
          splitNumber: 8,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              // color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            color: '#7a7a7c',
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f8f8f8'
            }
          }
        }],
        series: [
          {
            name: '新增订单',
            type: 'line',
            smooth: true,
            // symbol: 'circle',
            symbolSize: 6,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 2,
                color: '#3f82ff'
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0,136,212)',
                borderColor: 'rgba(0,136,212,0.2)',
                borderWidth: 12
              }
            },
            data: [100, 210, 245, 170, 200, 240, 270]
          }
        ]
      })
    }
  }
}
</script>
